<div class="right-content fl" xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <div class="common-tip">
    <a href="javascript:void(0)" class="home">Home </a>/
    <a href="javascript:void(0)" class="tip"> 模型模式 </a>
  </div>
  <div class="bgff mt10">
    <div class="model-head">
      <router-link class="add" :to="{ path: '/product/addModelBasic', replace: true }">新建模型</router-link>
      <div class="fr model-type">
        <a class="active" attr-link="myModel">我的模型</a>
        <a attr-link="sysModel">公共模型</a>
      </div>
    </div>
    <!-- 我的模型-->
    <div class="model-list" id="myModel" >
      <div class="search-div">
        <div class="company fl">
          <span>可用行业:</span>
          <select v-model="selected0">
            <option value="">全部</option>
            <option v-for="option in industryOptions" v-bind:value="option.id">
              {{ option.industryName }}
            </option>

          </select>
        </div>
        <div class="company fl ml30">
          <span>可用场景:</span>
          <select v-model="selected1">
            <option value="">全部</option>
            <option v-for="option in sceneOptions" v-bind:value="option.id">
              {{ option.sceneName }}
            </option>
          </select>
        </div>
        <div class="fr search-input pr">
          <input type="text" placeholder="输入关键字搜索" v-model="modelName"/><i class="pa"  @click="initModelList"></i>
        </div>
      </div>
      <div class="classfiy mt15">
        <span class="active" @click="spanTableAll('table')" id="spanTableAll">全部</span>
        <span id="spanTableYfb" @click="spanTableYfb('table')">已发布</span>
        <span id="spanTableWfb" @click="spanTableWfb('table')">未发布</span>
        <a class="fr img-suo" @click="imgSuoClass()"></a>
        <a class="fr list-model" @click="listModelClass()"></a>
      </div>
      <!--图形列表模式-->
      <div class="model-content" style="display: none">
        <!--全部-->
        <ul class="model mt20 clearfix" id="spanUlAll">
          <li v-if="modelDataList.length==0">暂无相关模型数据</li>
          <li v-for="(item, index) in modelDataList" v-if="modelDataList.length>0">
            <a class="data-title">{{item.modelName}}</a>
            <p class="fz12 data-hang">行业：{{item.industryName}}</p>
            <a href="javascript:void(0)" class="commented">{{item.stateName}}</a>
            <div class="data-demo">
              <router-link class="data-title" :to="{path:'modelDe',query: {modelId:item.id}}">
                <img src="./img/1.png"/>
              </router-link>
            </div>
            <a class="data-title mt15">用户评分：{{item.commentScore}}分</a>
            <p class="fz12 data-hang">已有{{item.userCount}}位用户使用此模块</p>
            <div class="use-model mt5" v-if="item.stateName=='暂存'">
              <router-link class="fz12 detail" :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link class="fz12 modify" :to="{path:'editModelBasic',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc,modelIndustry:item.industryCode,modelScene:item.sceneCode,modelIndustryName:item.industryName,modelSceneName:item.sceneName}}">编辑</router-link>
              | <a  @click="deleteModelById(item.id)" class="fz12 del">删除</a>
            </div>
            <div class="use-model mt5" v-if="item.stateName=='审核未通过'">
              <router-link class="fz12 detail" :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link class="fz12 modify" :to="{path:'editModelBasic',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc,modelIndustry:item.industryCode,modelScene:item.sceneCode,modelIndustryName:item.industryName,modelSceneName:item.sceneName}}">编辑</router-link>
              | <router-link class="fz12 use" :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
              | <a  @click="deleteModelById(item.id)" class="fz12 del">删除</a>
            </div>
            <div class="use-model mt5" v-if="item.stateName=='已提交'">
              <router-link class="fz12 detail" :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link class="fz12 use" :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
              | <a  @click="deleteModelById(item.id)" class="fz12 del">删除</a>
              | <a  @click="updateModelById(item.id)" class="fz12 publish">发布</a>
            </div>
            <div class="use-model mt5" v-if="item.stateName=='已下线'">
              <router-link class="fz12 detail" :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link class="fz12 use" :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
              | <a  @click="deleteModelById(item.id)" class="fz12 del">删除</a>
            </div>
            <div class="use-model mt5" v-if="item.stateName=='审核中' || item.stateName=='已发布'">
              <router-link class="fz12 detail" :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link class="fz12 use" :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
            </div>

          </li>
        </ul>
        <!--已发布-->
        <ul class="model mt20 clearfix" id="spanUlYfb">
          <li v-if="modelDataList.length==0">暂无相关模型数据</li>
          <li v-for="(item, index) in modelDataList" v-if="modelDataList.length>0 && item.stateName =='已发布'">
            <a class="data-title">{{item.modelName}}</a>
            <p class="fz12 data-hang">行业：{{item.industryName}}</p>
            <a href="javascript:void(0)" class="commented">{{item.stateName}}</a>
            <div class="data-demo">
              <router-link class="data-title" :to="{path:'modelDe',query: {modelId:item.id}}">
                <img src="./img/1.png"/>
              </router-link>
            </div>
            <a class="data-title mt15">用户评分：{{item.commentScore}}分</a>
            <p class="fz12 data-hang">已有{{item.userCount}}位用户使用此模块</p>
            <div class="use-model mt5">
              <router-link class="fz12 detail" :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              <router-link class="fz12 use" :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
            </div>
          </li>
        </ul>
        <!--未发布-->
        <ul class="model mt20 clearfix" id="spanUlWfb">
          <li v-if="modelDataList.length==0">暂无相关模型数据</li>
          <li v-for="(item, index) in modelDataList" v-if="modelDataList.length>0 && item.stateName !='已发布' && item.stateName !='已审核' ">
            <a class="data-title">{{item.modelName}}</a>
            <p class="fz12 data-hang">行业：{{item.industryName}}</p>
            <a href="javascript:void(0)" class="commented">{{item.stateName}}</a>
            <div class="data-demo">
              <router-link class="data-title" :to="{path:'modelDe',query: {modelId:item.id}}">
                <img src="./img/1.png"/>
              </router-link>
            </div>
            <a class="data-title mt15">用户评分：{{item.commentScore}}分</a>
            <p class="fz12 data-hang">已有{{item.userCount}}位用户使用此模块</p>
            <div class="use-model mt5" v-if="item.stateName=='暂存'">
              <router-link class="fz12 detail" :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link class="fz12 modify" :to="{path:'editModelBasic',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc,modelIndustry:item.industryCode,modelScene:item.sceneCode,modelIndustryName:item.industryName,modelSceneName:item.sceneName}}">编辑</router-link>
              | <a  @click="deleteModelById(item.id)" class="fz12 del">删除</a>
            </div>
            <div class="use-model mt5" v-if="item.stateName=='审核未通过'">
              <router-link class="fz12 detail" :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link class="fz12 modify" :to="{path:'editModelBasic',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc,modelIndustry:item.industryCode,modelScene:item.sceneCode,modelIndustryName:item.industryName,modelSceneName:item.sceneName}}">编辑</router-link>
              | <router-link class="fz12 use" :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
              | <a  @click="deleteModelById(item.id)" class="fz12 del">删除</a>
            </div>
            <div class="use-model mt5" v-if="item.stateName=='已提交'">
              <router-link class="fz12 detail" :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link class="fz12 use" :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
              | <a  @click="deleteModelById(item.id)" class="fz12 del">删除</a>
              | <a  @click="updateModelById(item.id)" class="fz12 publish">发布</a>
            </div>
            <div class="use-model mt5" v-if="item.stateName=='已下线'">
              <router-link class="fz12 detail" :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link class="fz12 use" :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
              | <a  @click="deleteModelById(item.id)" class="fz12 del">删除</a>
            </div>
            <div class="use-model mt5" v-if="item.stateName=='审核中'">
              <router-link class="fz12 detail" :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link class="fz12 use" :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
            </div>
          </li>
        </ul>
        <div id="modelPage" class="text-center model-page mt10"></div>
      </div>
      <!--数据列表模式-->
      <div class="model-content" style="padding-top: 0;">
        <!--全部--->
        <table class="model-table" id="allModelTable" cellspacing="0" cellpadding="0">
          <tr>
            <th width="15%">缩略图</th>
            <th width="17%">模型名称</th>
            <th width="13%">创建时间</th>
            <th width="13%">创建者</th>
            <th width="15%">状态</th>
            <th width="27%">操作</th>
          </tr>
          <tr v-if="modelDataList.length==0">
            <td colspan="6">暂无相关模型</td>
          </tr>
          <tr v-for="(item, index) in modelDataList" v-if="modelDataList.length>0">
            <td><img src="./img/ic-usemodel.png"/></td>
            <td>{{item.modelName}}</td>
            <td class="create-time">{{item.createTime}}</td>
            <td>{{item.creatorName}}</td>
            <td class="state">{{item.stateName}}</td>
            <td v-if="item.stateName=='暂存'">
              <router-link  :to="{path:'modelDe',query: {modelId:item.id,SelType:'no'}}">查看</router-link>
              | <router-link  :to="{path:'editModelBasic',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc,modelIndustry:item.industryCode,modelScene:item.sceneCode,modelIndustryName:item.industryName,modelSceneName:item.sceneName}}">编辑</router-link>
              | <a  @click="deleteModelById(item.id)">删除</a>
            </td>
            <td v-if="item.stateName=='审核未通过'">
              <router-link  :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link  :to="{path:'editModelBasic',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc,modelIndustry:item.industryCode,modelScene:item.sceneCode,modelIndustryName:item.industryName,modelSceneName:item.sceneName}}">编辑</router-link>
              | <router-link  :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
              | <a  @click="deleteModelById(item.id)">删除</a>
            </td>
            <td v-if="item.stateName=='已提交'">
              <router-link  :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link  :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
              | <a  @click="deleteModelById(item.id)">删除</a>
              | <a  @click="updateModelById(item.id)">发布</a>
            </td>
            <td v-if="item.stateName=='已下线'">
              <router-link  :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
              | <a  @click="deleteModelById(item.id)">删除</a>
            </td>
            <td v-if="item.stateName=='审核中' || item.stateName=='已发布'">
              <router-link  :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link  :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
            </td>
          </tr>

        </table>
        <!-- 已发布-->
        <table class="model-table" id="yfbModelTable" style="display: none" cellspacing="0" cellpadding="0">
          <tr>
            <th width="15%">缩略图</th>
            <th width="17%">模型名称</th>
            <th width="13%">创建时间</th>
            <th width="13%">创建者</th>
            <th width="15%">状态</th>
            <th width="27%">操作</th>
          </tr>
          <tr v-if="modelDataList.length==0">
            <td colspan="6">暂无相关模型</td>
          </tr>
          <tr v-for="(item, index) in modelDataList" v-if="modelDataList.length>0 && item.stateName =='已发布'">
            <td><img src="./img/ic-usemodel.png"/></td>
            <td>{{item.modelName}}</td>
            <td class="create-time">{{item.createTime}}</td>
            <td>{{item.creatorName}}</td>
            <td class="state">{{item.stateName}}</td>
            <td>
              <router-link  :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link  :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
            </td>
          </tr>
        </table>
        <!--未发布-->
        <table class="model-table" id="wfbModelTable" style="display: none" cellspacing="0" cellpadding="0">
          <tr>
            <th width="15%">缩略图</th>
            <th width="17%">模型名称</th>
            <th width="13%">创建时间</th>
            <th width="13%">创建者</th>
            <th width="15%">状态</th>
            <th width="27%">操作</th>
          </tr>
          <tr v-if="modelDataList.length==0">
            <td colspan="6">暂无相关模型</td>
          </tr>
          <tr v-for="(item, index) in modelDataList" v-if="modelDataList.length>0  && item.stateName !='已发布'">
            <td><img src="./img/ic-usemodel.png"/></td>
            <td>{{item.modelName}}</td>
            <td class="create-time">{{item.createTime}}</td>
            <td>{{item.creatorName}}</td>
            <td class="state">{{item.stateName}}</td>
            <td v-if="item.stateName=='暂存'">
              <router-link  :to="{path:'modelDe',query: {modelId:item.id,SelType:'no'}}">查看</router-link>
              | <router-link  :to="{path:'editModelBasic',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc,modelIndustry:item.industryCode,modelScene:item.sceneCode,modelIndustryName:item.industryName,modelSceneName:item.sceneName}}">编辑</router-link>
              | <a  @click="deleteModelById(item.id)">删除</a>
            </td>
            <td v-if="item.stateName=='审核未通过'">
              <router-link  :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link  :to="{path:'editModelBasic',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc,modelIndustry:item.industryCode,modelScene:item.sceneCode,modelIndustryName:item.industryName,modelSceneName:item.sceneName}}">编辑</router-link>
              | <router-link  :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
              | <a  @click="deleteModelById(item.id)" >删除</a>
            </td>
            <td v-if="item.stateName=='已提交'">
              <router-link  :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link  :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
              | <a  @click="deleteModelById(item.id)">删除</a>
              | <a  @click="updateModelById(item.id)">发布</a>
            </td>
            <td v-if="item.stateName=='已下线'">
              <router-link  :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link  :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
              | <a  @click="deleteModelById(item.id)">删除</a>
            </td>
            <td v-if="item.stateName=='审核中'">
              <router-link  :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link  :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
            </td>
          </tr>

        </table>

        <div id="modelPage2" class="text-center model-page mt20"></div>
      </div>

    </div>

    <!--系统模型-->
    <div class="model-list" id="sysModel" style="display: none;">
      <div class="search-div">
        <div class="company fl">
          <span>可用行业:</span>
          <select v-model="selectedSys0">
            <option value="">全部</option>
            <option v-for="option in industryOptions" v-bind:value="option.id">
              {{ option.industryName }}
            </option>
          </select>
        </div>
        <div class="company fl ml30">
          <span>可用场景:</span>
          <select v-model="selectedSys1">
            <option value="">全部</option>
            <option v-for="option in sceneOptions" v-bind:value="option.id">
              {{ option.sceneName }}
            </option>
          </select>
        </div>
        <div class="fr search-input pr">
          <input type="text" placeholder="输入关键字搜索" v-model="modelSysName"/><i class="pa" @click="initSystemModelList"></i>
        </div>
      </div>
      <div class="classfiy mt15">
        <span class="active">全部</span>

        <a class="fr img-suo-sys" @click="imgSuoClassSys()"></a>
        <a class="fr list-model-sys" @click="listModelClassSys()"></a>
      </div>

      <div class="model-content" style="display: none;">
        <ul class="model mt20 clearfix" v-if="systemModelDataList.length>0">
          <li v-for="(item, index) in systemModelDataList">
            <a class="data-title">{{item.modelName}}</a>
            <p class="fz12 data-hang">行业：{{item.industryName}}</p>
            <a href="javascript:void(0)" class="commented">{{item.stateName}}</a>
            <div class="data-demo">
              <router-link class="data-title" :to="{path:'modelDe',query: {modelId:item.id}}">
                <img src="./img/1.png"/>
              </router-link>
            </div>
            <a class="data-title mt15">用户评分：{{item.commentScore}}分</a>
            <p class="fz12 data-hang">已有{{item.userCount}}位用户使用此模块</p>
            <div class="use-model mt5" v-if="item.IsComment=='0'">
              <router-link class="fz12 detail" :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link class="fz12 use" :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
              | <router-link class="fz12 use" :to="{path:'modelEva',query: {modelId:item.id,modelName:item.modelName}}">评价</router-link>
            </div>
            <div class="use-model mt5" v-if="item.IsComment!='0'">
              <router-link class="fz12 detail" :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link class="fz12 use" :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
              |  <router-link class="fz12 detail" :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
            </div>
          </li>
        </ul>
        <div id="modelPage3" class="text-center model-page mt10"></div>
      </div>

      <div class="model-content" style="padding-top: 0;">
        <table class="model-table" cellspacing="0" cellpadding="0">
          <tr>
            <th width="15%">缩略图</th>
            <th width="17%">模型名称</th>
            <th width="13%">创建时间</th>
            <th width="13%">创建者</th>
            <th width="15%">状态</th>
            <th width="27%">操作</th>
          </tr>
          <tr v-if="systemModelDataList.length==0">
            <td colspan="6">暂无相关模型</td>
          </tr>
          <tr v-for="(item, index) in systemModelDataList" v-if="systemModelDataList.length>0">
            <td><img src="./img/ic-usemodel.png"/></td>
            <td>{{item.modelName}}</td>
            <td class="create-time">{{item.createTime}}</td>
            <td>{{item.creatorName}}</td>
            <td class="state">{{item.stateName}}</td>
            <td v-if="item.IsComment=='0'">
              <router-link  :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link  :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
              | <router-link  :to="{path:'modelEva',query: {modelId:item.id,modelName:item.modelName}}">评价</router-link>
            </td>
            <td v-if="item.IsComment!='0'">
              <router-link  :to="{path:'modelDe',query: {modelId:item.id}}">查看</router-link>
              | <router-link  :to="{path:'dataType',query: {modelId:item.id,modelName:item.modelName,modelDesc:item.modelDesc}}">使用</router-link>
              | <router-link  :to="{path:'modelDe',query: {modelId:item.id}}">已评价</router-link>
            </td>
          </tr>

        </table>
        <div id="modelPage4" class="text-center model-page mt20"></div>
      </div>
    </div>
  </div>
</div>
